<template>
  <div class="goodsDetail">
    <div class="flex_align">
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('验收类别') }}：</span>
        <el-select
          v-model="formInfo.IAType"
          class="w164"
          :placeholder="translate('请选择')"
        >
          <el-option
            v-for="item in acceptanceOption"
            :key="item.IAType"
            :label="item.label"
            :value="item.IAType"
          />
        </el-select>
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('验收编号') }}：</span>
        <el-input v-model="formInfo.Code" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('验收名称') }}：</span>
        <el-input v-model="formInfo.FullName" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">
          {{ translate('采购订单号') }}：
        </span>
        <el-select
          v-model="formInfo.PONo"
          class="w164"
          :disabled="from === 'edit' ? true : false"
          :placeholder="translate('请选择')"
          @change="changePono"
        >
          <el-option
            v-for="item in POnomentList"
            :key="item.PONo"
            :label="item.PONo"
            :value="item.PONo"
          />
        </el-select>
      </div>
    </div>
    <div class="flex_align mt20">
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('合同编号') }}：</span>
        <el-select
          v-model="formInfo.CID"
          class="w164"
          :placeholder="translate('请选择')"
        >
          <el-option
            v-for="item in agreementData"
            :key="item.CID"
            :label="item.ContractName"
            :value="item.CID"
          />
        </el-select>
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('项目名称') }}：</span>
        <el-input v-model="formInfo.PName" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('工作单号') }}：</span>
        <el-input v-model="formInfo.WorkNo" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">
          {{ translate('自定义编号') }}：
        </span>
        <el-input v-model="formInfo.CustomNo" class="w164" />
      </div>
    </div>
    <div class="flex_align mt20">
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('供货单位') }}：</span>
        <el-select
          v-model="formInfo.SupID"
          class="w164"
          :placeholder="translate('请选择')"
          @change="changeSuppkier"
        >
          <el-option
            v-for="item in supplierList"
            :key="item.SupID"
            :label="item.FullName"
            :value="item.SupID"
          />
        </el-select>
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('到货日期') }}：</span>
        <el-date-picker v-model="formInfo.ArrivalDate" style="width: 164px" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('验收日期') }}：</span>
        <el-date-picker v-model="formInfo.IADate" style="width: 164px" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">
          {{ translate('供货联系人') }}：
        </span>
        <el-input v-model="formInfo.SupContact" class="w164" />
      </div>
    </div>
    <div class="flex_align mt20">
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('联系电话') }}：</span>
        <el-input v-model="formInfo.SupTelePhone" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('快递单号') }}：</span>
        <el-input v-model="formInfo.TrackNo" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('委托单号') }}：</span>
        <el-input v-model="formInfo.CustomNo" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">
          {{ translate('验收记录号') }}：
        </span>
        <el-input v-model="formInfo.IANo" class="w164" />
      </div>
    </div>
    <!-- <div class="flex_align mt20">
      <div class="mr20">
        <span class="color_494949 ft12 pr5">大类号：</span>
        <el-input v-model="formInfo.LCNo" class="w164" />
      </div>
    </div> -->
    <div class="tableDetail">
      <!-- <div class="button-add">
        <el-button size="small" type="primary" @click="addFn()">
          添加行
        </el-button>
        <el-button size="small" type="primary" @click="deletedchild()">
          删除行
        </el-button>
      </div> -->
      <el-scrollbar
        wrap-class="scrollbar-wrapper"
        wrap-style="overflow-x: auto;"
      >
        <el-table
          ref="multipleTable"
          border
          :data="tableData"
          height="400"
          :row-class-name="tableRowClassName"
          :row-key="getRowKey"
          show-summary
          style="width: 1140px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="value" type="selection" width="55" />
          <el-table-column :label="translate('批次号')" width="170">
            <template #default="{ row }">
              <el-input v-model="row.BatchNo" type="text" />
            </template>
          </el-table-column>
          <el-table-column :label="translate('物资编码')" width="120">
            <template #default="{ row }">
              <div>{{ row.ItemCode }}</div>
            </template>
          </el-table-column>
          <el-table-column :label="translate('物料规格')" width="120">
            <template #default="{ row }">
              <div>{{ row.ItemSepc }}</div>
            </template>
          </el-table-column>
          <el-table-column :label="translate('物料描述')" width="120">
            <template #default="{ row }">
              <div>{{ row.ItemDescription }}</div>
            </template>
          </el-table-column>
          <el-table-column :label="translate('辅助物料描述')" width="120">
            <template #default="{ row }">
              <div>{{ row.AItemDescription }}</div>
            </template>
          </el-table-column>
          <el-table-column :label="translate('技术要求')" width="120">
            <template #default="{ row }">
              <div>{{ row.TechDemand }}</div>
            </template>
          </el-table-column>
          <el-table-column :label="translate('单位')" prop="Unit" width="60" />
          <el-table-column :label="translate('一般检查')">
            <el-table-column
              :label="translate('应收数量')"
              prop="NQty"
              width="120"
            >
              <template #default="{ row }">
                <el-input v-model="row.NQty" type="number" />
              </template>
            </el-table-column>
            <el-table-column
              :label="translate('实收合格数量')"
              prop="PaidInNQty"
              width="120"
            >
              <template #default="{ row }">
                <el-input v-model="row.PaidInNQty" type="number" />
              </template>
            </el-table-column>
            <el-table-column
              :label="translate('不合格数量')"
              prop="UnPaidInNPQty"
              width="120"
            >
              <template #default="{ row }">
                <el-input v-model="row.UnPaidInNPQty" type="number" />
              </template>
            </el-table-column>
            <el-table-column
              :label="translate('实收合格件数')"
              prop="NPaidInNum"
              width="120"
            >
              <template #default="{ row }">
                <el-input v-model="row.NPaidInNum" type="number" />
              </template>
            </el-table-column>
            <el-table-column
              :label="translate('随货资料')"
              prop="ItemMaterial"
              width="170"
            >
              <template #default="{ row }">
                <el-input v-model="row.ItemMaterial" type="text" />
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column :label="translate('理化性能检验')">
            <el-table-column
              :label="translate('合格数量')"
              prop="PhysQty"
              width="120"
            >
              <template #default="{ row }">
                <el-input v-model="row.PhysQty" type="number" />
              </template>
            </el-table-column>
            <el-table-column
              :label="translate('不合格数量')"
              prop="UnPhysQty"
              width="120"
            >
              <template #default="{ row }">
                <el-input v-model="row.UnPhysQty" type="number" />
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            :label="translate('辅助单位')"
            prop="AItemUnit"
            width="120"
          >
            <template #default="{ row }">
              <el-input v-model="row.AItemUnit" type="text" />
            </template>
          </el-table-column>
          <el-table-column
            :label="translate('辅助单位数量')"
            prop="AItemQty"
            width="120"
          >
            <template #default="{ row }">
              <el-input v-model="row.AItemQty" type="number" />
            </template>
          </el-table-column>
          <el-table-column :label="translate('出厂编号')" width="120">
            <template #default="{ row }">
              <div>{{ row.ProductionNo }}</div>
            </template>
          </el-table-column>
          <el-table-column :label="translate('出厂日期')" width="120">
            <template #default="{ row }">
              <div>{{ row.ProductionDate }}</div>
            </template>
          </el-table-column>
          <el-table-column :label="translate('备注')" prop="Remark" width="170">
            <template #default="{ row }">
              <el-input v-model="row.Remark" type="text" />
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
    <el-dialog
      v-model="dialogChiled"
      :title="translate('物料入库单')"
      width="800px"
      @close="closeFn"
    >
      <div style="padding-bottom: 20px">
        <span class="color_494949 ft12 pr5">{{ translate('关键字') }}：</span>
        <el-input
          v-model="searchChild"
          class="w164 mr10"
          :placeholder="translate('请输入关键字')"
        />
        <el-button
          class="settingBtn mr10"
          type="primary"
          @click="WmsGetPageData"
        >
          {{ translate('查询') }}
        </el-button>
      </div>
      <div>
        <el-table
          ref="multipleTable"
          border
          :data="WmsData"
          height="400"
          style="width: 800px"
          @selection-change="handleSelectionChangechiled"
        >
          <el-table-column prop="value" type="selection" width="55" />
          <el-table-column :label="translate('内部编码')" prop="InnerCode" />
          <el-table-column :label="translate('物资名称')" prop="FullName" />
          <el-table-column :label="translate('单位')" prop="Unit" />
          <el-table-column :label="translate('规格')" prop="Spec" />
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            :current-page="pageNo"
            :layout="layout"
            :page-size="pageSize"
            :total="total"
            @current-change="handleCurrentchiled"
            @size-change="handleSizechiled"
          />
        </div>
      </div>
      <template #footer>
        <el-button @click="dialogChiled = false">
          {{ translate('取消') }}
        </el-button>
        <el-button type="primary" @click="submitChiled">
          {{ translate('确定') }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import { WmsGetPageData, searchArrivalNoticeDetail } from '@/api/form'
  import { translate } from '@/i18n'
  export default {
    name: 'Detail',
    components: {},
    props: {
      form: {
        type: Object,
        default: () => {
          return {}
        },
      },
      from: {
        type: String,
        default: '',
      },
      chileddetail: {
        type: Array,
        default: () => {
          return []
        },
      },
      agreementlist: {
        type: Array,
        default: () => {
          return []
        },
      },
      supplierdata: {
        type: Array,
        default: () => {
          return []
        },
      },
      ponomentlist: {
        type: Array,
        default: () => {
          return []
        },
      },
    },
    emits: ['deletedchild', 'changelist'],
    data() {
      return {
        ItemList: [],
        itemChiledList: [],
        WmsData: [], // 选择物资数据
        formInfo: this.form,
        dialogChiled: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        pageNo: 1,
        pageSize: 10,
        radio: '',
        options: [],
        deleArr: [],
        tableData: this.chileddetail,
        agreementData: this.agreementlist,
        supplierList: this.supplierdata,
        POnomentList: this.ponomentlist,
        searchChild: '',
        acceptanceOption: [
          {
            label: '直达料',
            value: '1',
          },
          {
            label: '入库料',
            value: '2',
          },
        ],
      }
    },
    watch: {
      chileddetail(val) {
        console.log(val)
        this.tableData = val
      },
      form(val) {
        this.formInfo = val
      },
    },
    methods: {
      translate(row) {
        return translate(row)
      },
      //分页条数切换
      handleSizechiled(val) {
        this.pageSize = val
        this.WmsGetPageData()
      },
      //分页切换
      handleCurrentchiled(val) {
        this.pageNo = val
        this.WmsGetPageData()
      },
      tableRowClassName({ row, rowIndex }) {
        row.row_index = rowIndex
      },
      handleSelectionChange(e) {
        this.ItemList = e
      },
      changePono(val) {
        console.log(val)
        this.searchArrivalNoticeDetail(val)
      },
      async searchArrivalNoticeDetail(val) {
        const params = {
          pono: val,
        }
        const data = await searchArrivalNoticeDetail(params)
        if (data.Result.Code == '200') {
          this.tableData = data.Result.Data.data?.PurchaseOrderDetail
          this.formInfo = data.Result.Data.data
          this.$emit('changelist', data.Result.Data.data)
          console.log(this.tableData)
        } else {
          this.tableData = []
        }
      },
      handleSelectionChangechiled(e) {
        console.log(e)
        this.itemChiledList = e
      },
      changeSuppkier(val) {
        console.log(val)
        this.formInfo.SupID = val
        this.supplierList.map((item) => {
          if (item.SupID === val && item.TelePhone) {
            this.formInfo.SupTelePhone = item.TelePhone
          } else {
            this.formInfo.SupTelePhone = ''
          }
        })
      },
      submitChiled() {
        if (this.itemChiledList.length <= 0) {
          this.$message({
            message: translate('请选择物料'),
            type: 'warning',
          })
          return
        } else {
          const arrChiled = this.tableData
          this.itemChiledList.map((item) => {
            item.ItemDescription = `${item.FullName} ${item.Spec}`
            arrChiled.push(item)
          })
          this.$nextTick(() => {
            this.tableData = arrChiled
          })
          this.dialogChiled = false
        }
      },
      getRowKey(row) {
        return row.PODId
      },
      addFn() {
        this.itemChiledList = []
        this.$nextTick(() => {
          this.WmsGetPageData()
        })
        console.log(this.chileddetail)
      },
      async WmsGetPageData() {
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          tableName: '',
          sort: '',
          order: '',
          wheres: JSON.stringify([
            {
              name: 'FullName',
              value: this.searchChild,
              displayType: 'like',
            },
          ]),
          export: false,
          value: '',
        }
        const data = await WmsGetPageData(params)
        if (data.code == '200') {
          this.dialogChiled = true
          this.WmsData = data.data.rows
          this.total = data.data.total
        }
      },
      deletedchild() {
        if (this.ItemList.length <= 0) {
          this.$message({
            message: translate('请选择要删除的物料'),
            type: 'warning',
          })
          return
        }
        this.$nextTick(() => {
          const arr = this.tableData
          for (let i = 0; i < this.ItemList.length; i++) {
            for (let j = 0; j < arr.length; j++) {
              if (!this.ItemList[i].PODId) {
                if (this.ItemList[i].row_index === arr[j].row_index) {
                  arr.splice(j, 1)
                }
              } else if (this.ItemList[i].PODId === arr[j].PODId) {
                this.deleArr.push(arr[j].PODId)
                arr.splice(j, 1)
              }
            }
          }
          this.ItemList = []
          this.tableData = arr
          this.$emit('deletedchild', this.deleArr)
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .goodsDetail {
    height: 650px;
  }
  .flex_align {
    display: flex;
    align-items: center;
  }
  .tableDetail {
    padding: 10px;
    .button-add {
      text-align: end;
      padding: 10px;
    }
  }
  .mr20 {
    margin-right: 20px;
  }

  .w164 {
    width: 164px !important;
  }
  .mt20 {
    margin-top: 20px;
  }
  .mr10 {
    margin-right: 10px;
  }
  .w320 {
    width: 320px;
  }
  ::v-deep .el-scrollbar__wrap {
    overflow-x: auto;
    height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式
  }
  ::v-deep .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
    white-space: nowrap;
    display: inline-block;
  }
  ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }
  ::v-deep input[type='number']::-webkit-inner-spin-button,
  ::v-deep input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }
  ::v-deep thead th {
    border: 1px solid #d0f5e0;
  }
</style>
